{extend name="panel/layout" /}
{block name="main"}

<div class="row">
    <div class="col-xs-12">
        <div class="panel">
            <div class="panel-body">
                {:getHtmlCode(config('zz_gg_chat'))}
            </div>
        </div>
    </div>
    <div class="col-md-12">
        <div class="chat-room">
            <aside class="mid-side" style="    padding-bottom: 70px;">
                <div class="chat-room-head">
                    <h3>聊天室</h3>
                    <div class="pull-right position">
                        {if condition="isset($prev)"}
                        <a class="btn btn-info" href="?page={$prev}"><i class="fa fa-arrow-up"></i>上一页</a>
                        {/if}
                        {if condition="isset($next)"}
                        <a class="btn btn-info"  href="?page={$next}"><i class="fa fa-arrow-down"></i>下一页</a>
                        {/if}
                    </div>
                </div>

                {volist name="chatList" id="chat"}
                <div class="group-rom">
                    <div class="first-part odd"><span
                            class="text-primary">{$chat.user}</span><span>[{$chat.addtime}]</span></div>
                    <div class="second-part">{$chat.message}</div>
                </div>
                {/volist}
                <footer style="width: 100%;">
                    <form method="post"><input type="hidden" name="action" value="send">
                        <div class="chat-txt">
                            <input class="form-control" autocomplete="off" value="在这里输入聊天内容"
                                   onFocus="if(this.value=='在这里输入聊天内容'){this.value='';}"
                                   onblur="if(this.value==''){this.value='在这里输入聊天内容';}" name="message"/>
                        </div>
                        <button class="btn btn-danger" type="submit">Send</button>
                    </form>
                </footer>
            </aside>
        </div>
    </div>


</div>
{/block}

{block name="footJs"}
<link rel="stylesheet" type="text/css" href="/assets/chat/jscrollpane1.css"/>
<script src="/assets/chat/jquery-1.4.2.min.js"
        type="text/javascript"></script>
<!--引用jquery-1.4.2.min.js会影响添加表情，不引用jquery-1.4.2.min.js就不支持IE、火狐浏览器的鼠标滚轮插件-->
<!-- the mousewheel plugin -->
<script type="text/javascript"
        src="/assets/chat/jquery.mousewheel.js"></script>
<!-- the jScrollPane script -->
<script type="text/javascript"
        src="/assets/chat/jquery.jscrollpane.min.js"></script>
<script type="text/javascript">
    $('#jp-container').jScrollPane();
    var h1 = $(".jspPane").outerHeight();
    $(".jspPane").css('top', 400 - h1);
    $(".jspDrag").css('top', 200);

</script>
{/block}

